<template>
	<div class="page-container padding-20 query-list-container">
		<div v-show="$route.name === 'equityOrderMgt'">
			<div class="search-container">
				<el-form :inline="true" ref="form" :model="searchData" size="small">
					<el-form-item label="关键字输入">
						<el-input v-model="searchData.keyword" placeholder="请输入用户名/电话/订单ID/权益名称" style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="统计时间">
						<el-date-picker
							v-model="searchData.dateRange"
							type="daterange"
							align="right"
							unlink-panels
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch" size="small">查询</el-button>
						<el-button @click="onReset" size="small">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table class="mt-20 el-table-modify" :data="tableData" border>
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column prop="orderCode" align="center" label="订单号"></el-table-column>
				<el-table-column prop="memberNickName" align="center" label="用户名"></el-table-column>
				<el-table-column prop="memberPhone" align="center" label="联系电话"></el-table-column>
				<el-table-column prop="productName" align="center" label="产品名称"></el-table-column>
				<el-table-column prop="brandName" align="center" label="所属品牌"></el-table-column>
				<el-table-column align="center" label="销售渠道">
					<template slot-scope="scope">{{SALE_TYPE[scope.row.saleType]}}</template>
				</el-table-column>
				<!-- <el-table-column prop="statusLabel" align="center" label="状态"></el-table-column> -->
				<el-table-column prop="status" align="center" label="状态">
					<template slot-scope="scope">{{ORDER_STATUS[scope.row.status]}}</template>
				</el-table-column>
				<el-table-column prop="orderDate" align="center" label="下单时间">
					<template slot-scope="scope">{{scope.row.orderDate | dateFrm}}</template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="72">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="linkToDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				ref="pagination"
				class="mt-20"
				background
				:page-size.sync="pageOption.pageSize"
				:total="pageOption.total"
				@size-change="onSizeChange"
				@current-change="onPageChange"
				layout="slot,->,prev,pager,next,sizes,jumper"
			>
				<span
					class="pagination-title"
				>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
			</el-pagination>
		</div>
		<router-view v-if="$route.name !== 'equityOrderMgt'"></router-view>
	</div>
</template>

<script>
import { ORDER_STATUS, pickerOptions, momentFormatStr, SALE_TYPE } from "@/utils/const";
import moment from "moment";
import { privilegeOrderQuery } from "@/api/order";

export default {
	name: "EquityOrderMgt",
	components: {},
	data() {
		this.ORDER_STATUS = ORDER_STATUS;
		this.SALE_TYPE = SALE_TYPE;
		this.pickerOptions = pickerOptions;

		return {
			cinemaList: [],
			searchData: {
				keyword: "",
				dateRange: ["", ""]
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			selectData: null,
			visible: false
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.keyword = "";
			this.searchData.dateRange = ["", ""];
			this.requestData();
		},
		linkToDetail(row) {
			this.$router.push({ name: "equityOrderDetail", params: { id: row.id } });
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption;
			const postData = {};
			if (this.searchData.keyword) {
				postData.keyword = this.searchData.keyword;
			}
			if (this.searchData.dateRange[0]) {
				postData.start = moment(this.searchData.dateRange[0]).format(
					momentFormatStr.date
				);
				postData.end = moment(this.searchData.dateRange[1]).format(momentFormatStr.date);
			}
			const { data, total } = await privilegeOrderQuery(
				{ page: page - 1, size, ...postData }
			);
			this.tableData = data;
			this.pageOption.total = total;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			if (this.$refs.pagination) {
				let childrenRefs = this.$refs.pagination.$children;
				this.$nextTick(() => {
					childrenRefs.forEach(child => child.$forceUpdate());
				});
			}
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
		}
	},
	created() {
		this.requestData();
	}
};
</script>

<style lang="scss">
</style>